<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0; 
				padding: 0; 
				background:url(img/bg.jpg) ;
				background-size: 100% 100%;
				background-repeat:no-repeat;
				
			}
			.di1{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			input{
				width: 100%;
				height: 40px;
				border-bottom: 7px solid #000;
				border-top: 0px;
				border-left: 0px;
				border-right: 0px;
				font-size: 40px;
				opacity: 0.4;
			}
			input:focus{
				border-style: solid;
				border-color: red;
				box-shadow: 0 0 50px red;
			}
			
			.btn2{
				position: absolute;
				left: 15.625rem;
			}
		</style>
	</head>
	<body >
		<div class="di1">
			<input type="text" placeholder="账号"/><br />
			<input type="password" placeholder="密码" /><br />
			<button class="btn1"><img src="img/btn_login_n.png" onmousemove="this.src='img/btn_login_p.png'" onmouseout="this.src='img/btn_login_n.png'"/></button>
			<button class="btn2"><img src="img/btn_logout_n.png" onmousemove="this.src='img/btn_logout_p.png'"  onmouseout="this.src='img/btn_logout_n.png'"/></button>
		</div>
	</body>
</html>
